<template>
  <div class="upload-video-box">
    <div class="upload-video-title">上传视频</div>
    <div class="upload-video-text">
      时长和大小均不限 推荐上传大小为 5G 以内，支持常用视频格式 推荐使用
      mp4，请勿上传色情，反动等违法视频
    </div>
    <upload
      :multiple="false"
      type="mp4,rmvb,avi,mkv"
      @sucess="videoUploadSucess"
      @fileQueued="videoUploadFileQueued"
      @progressChange="videoProgressChange"
      v-show="!videoFile"
      :maxSize="500"
      :returnFile="true"
    >
      <div class="upload-video f-d-c f-j-a-c">
        <svg-icon name="langshangchuang" class="upload-icon"></svg-icon>
        <div class="upload-text">拖拽视频到此处也可以上传</div>
        <div class="upload-btn">上传视频</div>
      </div>
    </upload>
    <!-- v-if="videoFile" -->
    <div v-if="videoFile">
      <!-- 上传进度 -->
      <div class="upload-progress-box"   >
        <div class="f-j-sb-a-c upload-progress-title">
          <span>{{ progress }}%</span>
          <span
            >{{ toFixedNum((videoFile.fileSize * progress) / 100, 2) }} MB/{{
              videoFile.fileSize || 0
            }}MB</span
          >
        </div>
        <div class="upload-progress">
          <div class="upload-progress-inner" :style="{ width: progress + '%' }"></div>
        </div>
        <div class="upload-progress-status">
          <span v-if="progress >= 100" class="upload-sucess">上传成功</span>
          <span v-else>上传中</span>
        </div>
      </div>

      <!-- 表单 -->
      <el-form label-position="top" :model="formData" class="form-box">
        <el-form-item label="封面" class="video-cover-box">
          <upload
            :multiple="false"
            type="jpg,png,jpge"
            @sucess="coverUploadSucess"
            @fileQueued="coverUploadFileQueued"
            v-show="formData.cover && !coverUploadLoading"
            :returnFile="true"
          >
            <div
              class="video-cover f-j-a-c"
              :style="{ 'background-image': 'url(' + formData.cover + ')' }"
            >
              <div class="cover-set-btn">更换封面</div>
            </div>
          </upload>
          <div
            class="video-cover video-cover-loading"
            v-if="!formData.cover || coverUploadLoading"
            v-loading="!formData.cover || coverUploadLoading"
            element-loading-background="#f3f4f5"
          ></div>
        </el-form-item>

        <el-form-item label="标题">
          <div class="community-title f-a-c">
            <el-input
              class="community-title"
              placeholder="请输入视频标题"
              v-model="formData.title"
              maxlength="40"
            >
            </el-input>
            <span class="community-title-size">{{ formData.title.length }} / 40</span>
          </div>
        </el-form-item>

        <el-form-item label="视频类型">
          <el-radio-group
            v-model="formData.type"
            class="video-type"
          >
            <el-radio label="0">原创</el-radio>
            <el-radio label="1">转载</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="设置内容">
          <div class="community-content-box">
            <el-input
              id="inputor"
              type="textarea"
              class="community-content"
              :autosize="true"
              v-model="formData.content"
              placeholder="分享点什么"
              @input="contentInput"
              ref="communityContent"
              @click="contentInput"
            >
            </el-input>
          </div>

          <!-- 附件 -->
          <div class="attachment-list flex">
            <div
              v-for="(item, index) in attachmentList"
              :key="index"
              @click="attachmentListClick(item)"
            >
              <div class="attachment-item f-a-c">
                <svg-icon :name="item.icon" class="svg-icon svg-icon-default"></svg-icon>
                <svg-icon
                  :name="item.iconActive"
                  class="svg-icon svg-icon-active"
                ></svg-icon>
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <div class="submit-btn-boxs f-a-c">
        <div class="f-j-a-c">发布视频</div>
        <div class="f-j-a-c">取消发布</div>
      </div>
    </div>
  </div>
</template>

<script>
import upload from "@/components/upload.vue";
import { toFixedNum } from "@/utils/common.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
  ref,
  watch,
} from "vue";


// import "@/utils/jquery.js";
// import "@/utils/caret.js";
// import "@/utils/atwho.js";




export default defineComponent({
  components: {
    upload,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let communityContent = ref(null); //内容输入框
    let data = reactive({
      progress: 0, //上传进度
      videoFile: "", //video文件
      formData: {
        cover: "", //封面
        title: "", //标题
        type: "1", //类型
        content: "", //内容
      }, //表单数据
      coverUploadLoading: false, //封面
      topicPopShow: false, //话题弹框显示
      attachmentList: [
        {
          title: "圈子",
          icon: "icon-quanzi",
          iconActive: "icon-quanzi-yx",
          type: "factionalism",
        },
        {
          title: "话题",
          icon: "icon-huati",
          iconActive: "icon-huati-yx",
          type: "topic",
        },
        {
          title: "付费",
          icon: "icon-fufei",
          iconActive: "icon-fufei-yx",
          type: "pay",
        },
      ], //附件操作列表
    });

    // 视频上传成功
    let videoUploadSucess = (obj) => {
      getVideoFirstImg(obj.url);
    };

    // 上视频传开始前
    let videoUploadFileQueued = (file) => {
      let obj = file;
      obj.fileSize = toFixedNum(file.size / 1024 / 1024, 2);
      data.videoFile = obj;
    };

    // 视频上传进度
    let videoProgressChange = (pro) => {
      data.progress = pro;
    };

    // 封面上传成功
    let coverUploadSucess = (obj) => {
      data.formData.cover = obj.url;
      data.coverUploadLoading = false;
    };

    // 封面上传前
    let coverUploadFileQueued = (file) => {
      data.coverUploadLoading = true;
    };

    // 获取视频第一帧图片
    let getVideoFirstImg = (videoURL) => {
      const video = document.createElement("video"); // 创建临时video元素
      video.src = videoURL; // 设置视频地址
      video.setAttribute("crossOrigin", "Anonymous");
      video.currentTime = 1; //视频第一秒
      video.addEventListener("loadeddata", () => {
        const canvas = document.createElement("canvas"); // 创建临时canvas元素
        canvas.width = video.videoWidth; // 设置画布尺寸与视频尺寸相同
        canvas.height = video.videoHeight;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 绘制视频第一帧到画布上
        const imageData = canvas.toDataURL(); // 转换画布内容为图像数据
        data.formData.cover = imageData; // 更新第一帧图片地址
      });
    };

    // 内容输入框变化
    let contentInput = (e) => {
      console.log(e);
    };

    // 附件列表点击
    let attachmentListClick = (item) => {
      // 话题
      if (item.type == "topic") {
        communityContent.value.focus();
        data.formData.content = data.formData.content + " #";
        //   data.formData.content.charAt(data.formData.content.length - 1) === " "
        //     ? "#"
        //     : " #";
        proxy.$nextTick(() => {
          communityContent.value.selectionStart = communityContent.value.selectionEnd =
            data.formData.content.length;
        });
        $("#inputor").atwho("renderView");
      }
    };

    onMounted(() => {
      proxy.$nextTick(() => {
        $("#inputor").atwho({
          at: "#",
          data: ["Peter", "Tom", "Anne"],
        });
      });
    });

    return {
      toFixedNum,
      videoProgressChange,
      videoUploadFileQueued,
      videoUploadSucess,
      coverUploadSucess,
      coverUploadFileQueued,
      contentInput,
      attachmentListClick,
      communityContent,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.upload-video-box {
  background: #ffffff;
  min-height: calc(100vh - 100px);
  width: 100%;
  margin-top: 30px;
  border-radius: 10px;
  min-width: 600px;
  padding: 60px 200px 0;
}

.upload-video-title {
  font-size: 18px;
  font-weight: bold;
}

.upload-video-text {
  font-size: 12px;
  color: #656f79;
  padding-top: 10px;
  line-height: 20px;
}

.upload-video {
  border: 1px dashed #ececec;
  padding: 160px 0;
  margin-top: 20px;
  border-radius: 10px;
  .upload-icon {
    width: 40px;
    height: 30px;
  }
  .upload-text {
    font-size: 12px;
    color: #64c8dc;
    padding: 10px 0 30px;
  }

  .upload-btn {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    padding: 14px 40px;
    &:active {
      opacity: 0.7;
    }
  }
}

// 上传进度
.upload-progress-box {
  padding-top: 20px;
  .upload-progress-title {
    font-size: 12px;
    color: #656f79;
    padding-bottom: 4px;
  }
  .upload-progress {
    //
    height: 6px;
    border-radius: 6px;
    background: #eaedf0;
    position: relative;

    .upload-progress-inner {
      position: absolute;
      background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
      height: 6px;
      border-radius: 6px;
      left: 0;
      top: 0;
    }
  }

  .upload-progress-status {
    text-align: right;
    font-size: 12px;
    // color: #ff425b;
    padding-top: 4px;
    color: #656f79;

    .upload-sucess {
      color: #ff425b;
    }
  }
}
// 表单
.form-box {
  :deep(.el-form-item__label) {
    font-size: 16px;
    font-weight: bold;
    color: #000000;
  }
}

// 视频封面
.video-cover-box {
  margin-top: 26px;
  .video-cover {
    width: 300px;
    height: 170px;
    border-radius: 10px;
    position: relative;
    background-size: 100% !important;

    .cover-set-btn {
      font-size: 14px;
      color: #ffffff;
      padding: 5px 12px;
      border-radius: 14px;
      border: 1px solid #ffffff;
      line-height: 14px;
      cursor: pointer;
    }
  }
  .video-cover-loading {
    background-color: #f3f4f5;
    border-radius: 10px;
    overflow: hidden;
  }
}

// 标题
.community-title {
  height: 40px;
  width: 100%;
  position: relative;
  background: #f7f8f9;
  border-radius: 10px;
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    padding-right: 55px;
    background: transparent;
  }
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #64c8dc inset;
  }
  .community-title-size {
    position: absolute;
    right: 0;
    color: #656f79;
    z-index: 9999;
    font-size: 14px;
    width: 55px;
    display: inline-block;
    text-align: center;
  }
}

// /视频类型
.video-type {
  :deep(.el-radio__input.is-checked .el-radio__inner) {
    background: #64c8dc;
    background-color: #64c8dc;
    border-color: #64c8dc;
  }
  :deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #64c8dc;
  }
}

// 设置内容
.community-content-box {
  position: relative;
  width: 100%;
}
.community-content {
  min-height: 90px;

  :deep(.el-textarea__inner) {
    background: #f3f4f5;
    border-radius: 10px;
    min-height: 90px !important;
    font-size: 14px;
    resize: none;
    &:focus {
      box-shadow: 0 0 0 1px #64c8dc inset !important;
    }
  }
}
// 附件
.attachment-list {
  flex: 1;
  flex-wrap: wrap;
  .attachment-item {
    font-size: 14px;
    color: #656f79;
    margin-right: 20px;
    margin-top: 10px;
    cursor: pointer;
    .svg-icon {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    .svg-icon-default {
      display: block;
    }
    .svg-icon-active {
      display: none;
    }

    &:hover {
      color: #64c8dc;
      .svg-icon-default {
        display: none;
      }
      .svg-icon-active {
        display: block;
      }
    }
    &:active {
      opacity: 0.7;
    }
  }
}

.el-form-item {
  margin-top: 40px;

  :deep(.el-form-item__label) {
    margin-bottom: 10px !important;
  }
}

// 按钮
.submit-btn-boxs {
  padding: 40px 0 120px;
  > div {
    width: 96px;
    height: 36px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
    cursor: pointer;
    &:active {
      opacity: 0.7;
    }
  }
  > div:first-child {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    color: #ffffff;
  }
  > div:last-child {
    background: #f3f4f5;
    color: #656f79;
  }
}
</style>

<style>
@import url("@/utils/atwho.css");
</style>
